<template>
  <div style="width:100vw;height:100vh;background-color: #F8F8F8FF;" class="outside-detail">
    <!-- 头部 -->
    <!-- <div class="outside-detail-header">
      <mt-header fixed title="岗位详情">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <div class="header-icon"><img src="../../assets/talentPicture/share.png" alt=""></div>
    </div>-->
    <!-- 主体部分 -->
    <div class="bscroll" ref="bscroll2">
      <div class="bscroll-container">
        <div class="outside-detail-body">
          <div class="detail-box">
            <div class="detail-info-tip">{{recruitmentInfo.name}}</div>
            <div class="detail-info-icon">
              <img src="../../assets/homePicture/xgjt.png" alt />
            </div>
            <ul class="options">
              <li>{{recruitmentInfo.city}} |</li>
              <li>{{recruitmentInfo.jobTime + '年'}} |</li>
              <li>{{recruitmentInfo.edu}} |</li>
              <li>{{recruitmentInfo.jobduty}}</li>
            </ul>
            <div class="cont">
              <div class="salary">{{recruitmentInfo.fSalary+'k'+'-'+recruitmentInfo.eSalary+'k'}}</div>
              <div class="times">{{'最近更新'+recruitmentInfo.updateTime}}</div>
            </div>
            <div class="line"></div>
            <div class="position">
              <div class="pos-icon">
                <img src="../../assets/talentPicture/posi.png" alt />
              </div>
              <div class="detail-pos">{{recruitmentInfo.city+' '+recruitmentInfo.address}}</div>
            </div>
          </div>

          <div class="pos-light">
            <p>职位亮点</p>
            <span v-for="(item,index) in lightPoint" :key="index" class="lightpoint">{{item}}</span>
          </div>

          <div class="pos-des">
            <p>职位说明</p>
            <div class="pos-des-tip">岗位职责</div>
            <ul>
              <li>{{recruitmentInfo.jobDuty}}</li>
            </ul>
            <div class="pos-des-tip">福利待遇</div>
            <ul class="pos-des-ul">
              <li>{{recruitmentInfo.welfare}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="pos-btn">
      <div class="com intro" @click="recommend">我要竞聘</div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
export default {
  data() {
    return {
      id: 0,
      //招聘信息详情
      lightPoint: [],
      recruitmentInfo: []
    };
  },
  methods: {
    // 获取外部岗位详情
    async qryRecruitmentById() {
      const { data: res } = await this.$http.get(
        "/recruitment/qryRecruitmentById",
        { params: { id: this.$route.query.id } }
      );
      console.log(res);
      //处理时间戳
      let timer = res.data.updateTime;
      var date = new Date(parseInt(timer));
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate();
      res.data.updateTime = M + "月" + D + "日";
      //处理学历
      if (res.data.edu == 0) {
        res.data.edu = "大专";
      } else if (res.data.edu == 1) {
        res.data.edu = "本科";
      } else if (res.data.edu == 2) {
        res.data.edu = "硕士";
      } else if (res.data.edu == 3) {
        res.data.edu = "博士";
      } else {
        res.data.edu = "其他";
      }
      this.lightPoint = res.data.lightPoint.split(",");

      this.recruitmentInfo = res.data;
    },
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        console.log(bscrollDom);
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    recommend() {
      this.$router.push({
        path: "/introduceInfo",
        query: {
          id: this.$route.query.id
        }
      });
    }
  },
  created() {
    this.qryRecruitmentById();
  },
  mounted() {
    this.initScroll("bscroll2");
    setText("优才引荐");
  }
};
</script>

<style lang="less" scoped>
@import url("~@/pagecss/outside-detail.less");
.bscroll-container{
 box-sizing: content-box;
  height: 100%;
  padding-bottom: 2rem;
}
.lightpoint {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(71, 135, 228, 1);
  background-color: transparent;
}
img {
  width: 100%;
  height: 100%;
}
</style>